<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>志愿者注册</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/style.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <style type="text/css">
        ul{background: #eee!important;}
        ul:after{display: none!important;}
        li{background: #fff;border-radius: 4px;border: 1px solid #dadada;margin-bottom: 15px;}
        li:last-child{margin-bottom: 0;}
        .check-code{width: 60%;  position: relative;}
        .check-code .code_btn{
            position: absolute;
            height: 44px;
            line-height: 44px;
            top: 0;
            right: -68%;
            border-radius: 2px;
            width: 60%;
        }
        .list-block .item-inner:after{display: none;}
        .btn-block a{color: #007AFF;}
        .tips{padding-top: 5px;margin-bottom: 5px;font-size: 12px;}
        .o-volunteer{border-bottom: 3px solid #0075aa!important;}
    </style>
</head>
<body>
<div class="page">
    <header class="bar bar-nav">
        <a class="icon icon-left pull-left"  href="${basepath}/front/account/toLogin">返回</a>
        <h1 class="title">志愿者注册</h1>
    </header>
    <div class="content">
        <form action="">
            <div class="content-block">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" name="card" placeholder="请输入真实姓名">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="tel" name="name" placeholder="请输入手机号">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="check-code">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input col-80">
                                        <input type="text" name="SmsContent" placeholder="请输入验证码">
                                        <input type="hidden" id="SmsId" value="" />
                                    </div>
                                </div>
                            </div>
                            <a href="#" class="code_btn button button-fill button-primary col-20 pull-right">验证码</a>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text"onfocus="this.type='password'" name="password" placeholder="请输入密码">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="tips">*注册后无法修改，请输入真实的信息</div>
                </div>
                <a type="button"  class="o-volunteer button button-big button-fill button-primary">注册</a>
            </div>
        </form>

    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script>
    $.config={
        router:false
    }
</script>

<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type="text/javascript">
    function getCode() {
        var phone = $('input[name="name"]').val();
        if (!checkMobile(phone)) {
            $.toast('手机格式错误');
            return;
        }

        var btn = $('.code_btn');
        btn.off('click');
        btn.css({'background-color': '#CCCCCC','border-color':'#CCCCCC'});
        var showTime = function (second) {
            setTimeout(function () {
                if (second == 0) {
                    btn.css('background-color', '');
                    btn.addClass('getCode');
                    btn.text('获取验证码');
                    $('.getCode').on('click', function () {
                        getCode();
                    });
                    return;
                }
                btn.text(second + ' 秒');
                second --;
                showTime(second);
            }, 1000);
        };
        $.ajax({
            type: 'POST',
            url: '/front/account/getSMSCode',
            dataType: 'json',
            data:{
                mobile:phone
            },
            success:function(res){
                if(res.success){
                    showTime(60);
                    $.toast('发送成功');
                    $('#SmsId').val(res.data.sessionId);
                }else{
                    $.toast('该手机已注册');
                    $('.code_btn').css('background-color','')
                }
            }
        } )
    }

    $('.code_btn').on('click', function () {
        getCode();
    });
    function checkMobile(str) {
        var re = /^1[356789]\d{9}$/;
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }
    $('.o-volunteer').click(function(){
           var idCard=$("input[name='card']").val(),
                phone=$("input[name='name']").val(),
                password=$("input[name='password']").val(),
                SmsContent=$("input[name='SmsContent']").val();

            if (idCard == ''||phone == ''||password == ''||SmsContent == '') {
                $.toast('信息不完整');
            } else{
                $.ajax({
                    type:'POST',
                    url:'/front/account/insertAccount',
                    dataType:'json',
                    data:{
                        name:idCard ,
                        phone:phone,
                        password:password,
                        SmsId:$('#SmsId').val(),
                        SmsContent:SmsContent
                    },
                    success:function(data){
                        if(data.success){
                            $.toast('注册成功');
                            setTimeout(function(){
                                window.location.href='${basepath}/front/account/toLogin'
                            },2000)
                        }else{
                            $.toast(data.message)
                        }

                    }
                })
            }
    })
</script>
<script>
    $.init();
</script>
</body>
</html>
